<template>
    <el-card class="box-card">
         <div style="height: 100%;background: white;">
            <div class="box-row-1">
                <el-form :inline="true" :model="ruleForm" ref="dataForm1">
                    <el-form-item label="规则名称" prop="ruleName" class="itemClass">
                        <el-input size="small" v-model="ruleForm.ruleName" placeholder="请输入规则名称"></el-input>
                    </el-form-item>
                    <el-form-item label="规则编码" prop="ruleCode" class="itemClass">
                        <el-input size="small" v-model="ruleForm.ruleCode" placeholder="请输入规则编码"></el-input>
                    </el-form-item>

                    <el-form-item label="启用状态" prop="State" class="itemClass">
                        <el-select size="small" class="select-height" v-model="ruleForm.State" placeholder="请选择" clearable>
                            <el-option v-for="item in options" :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="submitForm('dataForm1')">搜索</el-button>
                        <el-button size="small" @click="resetForm('dataForm1')" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="box-row-2">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-button size="small" type="primary" icon="el-icon-plus" @click="add" plain>新增</el-button>
                            <el-button size="small" type="success" icon="el-icon-edit" :disabled="isUDisable" @click="handleEdit(null,true)" plain>修改</el-button>
                            <el-button size="small" type="danger" icon="el-icon-delete" @click="delAll" :disabled="isDisable" plain>删除</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-button icon="el-icon-search"  size="small" circle></el-button>
                            <el-button icon="el-icon-refresh" size="small" @click="Refresh" circle></el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="box-row-3">
                <el-table :data="tableData" style="width: 100%" ref="dataTable" v-loading="isloading"  @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column v-if="show" prop="rulE_ID" label="#" width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="rulE_CODE" label="规则编码" width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="rulE_NAME" label="规则名称" width="180" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="enablE_FLAG" label="是否启用" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.enablE_FLAG == 0 ? 'primary' : 'danger'" disable-transitions>
                                <div v-if="scope.row.enablE_FLAG == 0">启用</div>
                                <div v-else>禁用</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rulE_DESC" label="描述" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="remark" label="备注"  align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="creatE_TIME" label="创建时间" width="180" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="120">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                        <el-button @click="del(scope.row)" type="text" size="small" icon="el-icon-delete">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div class="box-row-3-pagination">
                    <Pagination  :pageindex="PageIndex" :pagesize="PageSize" :total="total"  @CurrentChange="CurrentChange" @SizeChange="SizeChange" />
                </div>
            </div>
        </div>
        <el-dialog width="450px" :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false">
            <CodingRulesInput :model="model" ref="s1" @CloseDialog="closeDialog" @DataBind="dataBind" :isUpdate="isUpdate" />
        </el-dialog>
        
    </el-card>
</template>

<script>
//分页组件
import Pagination from '../../components/Pagination.vue'
//新增/修改弹框组件
import CodingRulesInput from './MasterDataComponents/CodingRulesInput.vue'

export default {
    components:{
        Pagination,
        CodingRulesInput
    },
    data(){
        return{
            options:[{
                    value: '0',
                    label: '启用'
                },{
                    value:'1',
                    label:'禁用'
                }
            ],
            ruleForm:{
                ruleName:'',
                ruleCode:'',
                State:''
            },
            tableData: [],
            PageIndex:1,//当前页数
            PageSize:10,//每页显示条数
            total:0,//总条数
            show:false,//是否显示某列
            isDisable:true,//是否禁用按钮
            isUDisable:true,//是否禁用修改按钮
            isUpdate:false,//是否修改
            dialogFormVisible:false,//是否显示弹框
            isloading:false,//是否打开加载框
            title:'新增编码规则',//弹框标题
            model:{
                rulE_ID:'',
                rulE_CODE:'',
                rulE_NAME:'',
                rulE_DESC:'',
                enablE_FLAG:0,
                remark:''
            },
            rulesForm:{
                rulE_CODE:[{ required : true, message:'请输入规则编码', trigger:'blur'}],
                rulE_NAME:[{ required : true, message:'请输入规则名称', trigger:'blur'}],
            }
        }
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.dataBind();
                }else{
                    this.show('服务繁忙, 请稍后重试!');
                }
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        SizeChange(e){
            this.PageSize = e;

            //从第一页开始
            this.PageIndex = 1;
            this.dataBind();
        },
        CurrentChange(e){
            this.PageIndex = e;
            this.dataBind();
        },
        //获取数据
        dataBind(){
            this.isloading = true;
            this.$http.request({
                type:'get',
                url:'/api/CodingRules',
                params:{
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize,
                    ruleName:this.ruleForm.ruleName,
                    ruleCode:this.ruleForm.ruleCode,
                    State:this.ruleForm.State
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                }
            }).catch(err=>{
                this.ShowMsg('服务器繁忙，请稍后重试','error');
            }).finally(()=>{
                this.isloading=false;
            })
        },
        //更新数据
        Refresh(){
            this.dataBind();
        },
        //新增
        add(){
            this.dialogFormVisible= true;
            this.title="新增规则编码"
            this.isUpdate =false;
        },
        //编辑
        handleEdit(model,isHeadsU=false){
            if(isHeadsU){
                this.model = JSON.parse(JSON.stringify(this.$refs.dataTable.selection[0]));
            }
            this.title="修改规则编码";
            this.dialogFormVisible = true;
            this.isUpdate = true;
        },
        //删除单条数据
        del(model){
            let Id = model.rulE_ID;
            if(Id != undefined){
                this.$confirm('此操作将永久删除数据, 是否继续?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                })
                .then(()=>{
                    const loading = this.$loading();
                    this.$http.delete('/api/CodingRules',{params:{Id:Id}})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.dataBind();
                            }
                            else{
                                this.ShowMsg(res.data.msg,'warning');
                            }
                        }).catch(err =>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                        })
                }).catch(()=>{})
            }
        },
        //删除多条数据
        delAll(){
            if(this.$refs.dataTable.selection.length > 0){
                let ids = this.$refs.dataTable.selection.map(x=>x.rulE_ID);
                console.log(ids);
                this.$confirm('此操作将永久删除该数据, 是否继续?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                })
                .then(()=>{
                    const loading =this.$loading();
                    this.$http.delete('/api/CodingRules/DelAll',{params:{id:ids.join(',')}})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.dataBind();
                            }else{
                                this.ShowMsg(res.data.msg,'warning');
                            }
                        }).catch(err=>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                        })
                }).
                catch(()=>{})
            }
        },
        //监听dataTable是否有选中项
        handleSelectionChange(val){
            if(val.length > 0){
                this.isDisable = false;
            }
            else if(!val.length){
                this.isDisable =true;
            }
            let isTrue = val.length ===1 ? false:true;
            this.isUDisable= isTrue;
        },
        //关闭弹框
        closeDialog(){
            this.dialogFormVisible=false;
            this.model={
                rulE_CODE:'',
                rulE_NAME:'',
                rulE_DESC:'',
                enablE_FLAG:0,
                remark:''
            }
            if(this.$refs.s1)
            {
                this.$refs.s1.$refs.dataForm.resetFields();
            }
            console.log('弹框关闭',this.model);
        }
    },
    created(){
        this.dataBind();
    }
}
</script>

<style scoped>
.box-card{
    height: 99%;
}
.itemClass{
    margin-right:15px;
}
.box-Input-mini textarea{
    width:100%;
    height:60px;
}
.bg-purple-light{
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.box-row-3,.box-row-3-pagination{
    margin-top:10px;
}
.select-height{
    padding-bottom: 18px;
}
</style>